<template>
  <div class="park-list" v-if="show">
    <div class="list-header">
      <div>
        <p>
          共找到{{ listData.projectStatisticsDetails.projectNum ? listData.projectStatisticsDetails.projectNum : 0 }}个符合条件的项目，房源总量：{{
            listData.projectStatisticsDetails.buildNum ? listData.projectStatisticsDetails.buildNum : 0
          }}套/{{ listData.projectStatisticsDetails.buildArea ? listData.projectStatisticsDetails.buildArea : 0 }}万m² 可售总量：{{
            listData.projectStatisticsDetails.ksNum ? listData.projectStatisticsDetails.ksNum : 0
          }}套/{{ listData.projectStatisticsDetails.ksArea ? listData.projectStatisticsDetails.ksArea : 0 }}m²，已售总量：{{
            listData.projectStatisticsDetails.ysNum ? listData.projectStatisticsDetails.ysNum : 0
          }}套/{{ listData.projectStatisticsDetails.ysArea ? listData.projectStatisticsDetails.ysArea : 0 }}万m²
        </p>
      </div>
    </div>
    <div class="title">
      <div class="list-title">
        <div class="list-title-top">
          <div>选中项目排名</div>
          <div class="list-title-top-r">
            <p :class="togglePzInd == 1 ? 'pm active' : 'pm'" @click="togglePz(1)">排名</p>
            <p :class="togglePzInd == 2 ? 'xz active' : 'xz'" @click="togglePz(2)">走势</p>
          </div>
        </div>
        <div class="search-sty" v-if="togglePzInd == 1">
          <div
            v-for="(item, index) in selectList"
            @click="getSelectType(item.value)"
            :class="selectType == item.value ? 'tab-index' : 'tab-indexs'"
            class="tabs"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="list-unit" v-if="togglePzInd == 1">{{ selectName }}</div>
    <div class="list-box" v-if="togglePzInd == 1">
      <div class="list-item" v-for="(item, index) in listData.projectSortList" :key="index">
        <div class="item-sort">{{ index + 1 }}</div>
        <div class="item-name" @click="flyxmmc(item)">
          {{ item.name }}
        </div>
        <div class="item-progress">
          <el-progress :stroke-width="20" :text-inside="true" :percentage="(item.value / listData.maxValue) * 100" />
        </div>
        <div class="item-unit-money">
          {{ item.value }}
        </div>
      </div>
    </div>
    <priceTrend v-if="togglePzInd == 2" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import priceTrend from "@/components/gisPage/priceTrend.vue";
import busEmitter from "@/utils/bus";
import { selectEcharts } from "@/api/gisHouseAnalysAlert";
const show = ref(false);
const listData = ref({
  projectStatisticsDetails: "",
  projectSortList: [],
});
const selectList = reactive([
  { label: "房屋单价", value: 1 },
  { label: "房屋面积", value: 2 },
  { label: "房屋销量", value: 3 },
  { label: "房屋库存", value: 4 },
  { label: "地铁距离", value: 5 },
  { label: "商场距离", value: 6 },
]);

const togglePzInd = ref(1);
const selectNameList = ref<any>(["单价", "面积", "销量", "库存", "地铁距离", "商圈距离"]);
const selectType = ref(1);
const selectName = ref("单价");
const xmmcList = ref([]);

busEmitter.on("getListData", (data: any) => {
  if (data == 2) {
    show.value = false;
  } else {
    console.log(data);
    show.value = true;
    xmmcList.value = data.xmmcList;
    data.projectSortList.forEach((i) => {
      i.percentage = (parseFloat(i.value) / parseFloat(data.maxValue)).toFixed(2) * 100;
    });
    listData.value = data;
    togglePzInd.value = 1;
  }
});

//点击项目名称摄像头移动到指定位置
const flyxmmc = (val) => {
  busEmitter.emit("flyxmmc", val);
};

//切换tab
const getSelectType = (index: number) => {
  selectType.value = index;
  selectName.value = selectNameList.value[index - 1];
  busEmitter.emit("setProValue", selectType.value);
};

const togglePz = async (index: number) => {
  togglePzInd.value = index;
  if (index == 2) {
    let { data } = await selectEcharts({ xmmcList: xmmcList.value });
    busEmitter.emit("getSwiperEchart", data);
  }
};
</script>

<style scoped lang="less">
.park-list {
  overflow: hidden;
  position: fixed;
  top: 100px;
  right: 54px;
  z-index: 1000;
  width: 376px;
  height: 717px;
  background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
  border-radius: 0px 0px 0px 0px;
  font-size: 18px;
  color: #ffffff;
  padding: 10px 12px;
  .title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #ffffff;
    font-weight: 500;
  }
  .list-header {
    padding-bottom: 10px;
    font-size: 12px;
    color: #edf2f8;
  }
  .search-sty {
    display: flex;
    margin-top: 7px;
    justify-content: space-between;
    .tabs {
      width: 54px;
      height: 23px;
      border-radius: 3px 3px 3px 3px;
      font-weight: 400;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tab-index {
      background: linear-gradient(180deg, #da9860 0%, #a0897c 100%);
      color: #ffffff;
    }
    .tab-indexs {
      background: linear-gradient(180deg, #9fc0f3 0%, #709ee3 100%);
      color: #002b4f;
    }
    .tabs:hover {
      cursor: pointer;
    }
  }
  .list-unit {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-align: right;
    margin-bottom: 10px;
  }
  .list-box {
    overflow: hidden;
    overflow-y: scroll;
    height: 562px;
    .list-item {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 16px;
      padding: 10px 0px;
      .item-sort {
        color: #8eeaff;
        width: 30px;
        text-align: center;
      }
      .item-name {
        color: #8eeaff;
        margin: 0px 10px;
        width: 80px;
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /*超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
      }
      .item-name:hover {
        cursor: pointer;
      }
      .item-progress {
        width: 120px;
        margin-right: 10px;
      }
      .item-unit-money {
        margin-right: 10px;
        width: 70px;
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /*超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
        text-align: center;
      }
      .item-unit-money:hover {
        cursor: pointer;
      }
    }
    // 设置滚动条样式
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 16px;
      background: #02e3ee;
    }
    &::-webkit-scrollbar-track {
      border-radius: 16px;
      background: #8a8a8a;
    }
  }
  .empty {
    height: 356px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
}
::v-deep .el-progress-bar__innerText {
  display: none;
}

.list-title-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-title-top-r {
  display: flex;
  align-items: center;
  p {
    width: 100px;
    height: 28px;
    background: url("@/assets/img/gisPage/pmxz-bg.png");
    background-size: 100% 100%;
    padding-left: 49px;
    font-size: 14px;
    color: #ffffff;
    line-height: 24px;
    position: relative;
    cursor: pointer;
  }
  .active {
    background: url("@/assets/img/gisPage/pmxz-bg-active.png");
    background-size: 100% 100%;
  }
  p::before {
    content: "";
    width: 15px;
    height: 15px;
    background: url("@/assets/img/gisPage/pm-logo.png");
    background-size: 100% 100%;
    position: absolute;
    left: 30px;
    top: 6px;
  }
  .xz::before {
    background: url("@/assets/img/gisPage/zs-logo.png");
    background-size: 100% 100%;
    top: 5px;
  }
  .xz {
    margin-left: -8px;
  }
}
</style>
